<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
	<head>
<meta charset="utf-8" />
<title>Logica Tutorial</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen"
	title="Stylesheet" />
<link rel="stylesheet" href="slick.grid.css" type="text/css"
	media="screen" title="Stylesheet" />
<link rel="stylesheet" href="jquery-ui-1.8.16.custom.css"
	type="text/css" media="screen" title="Stylesheet" />
<script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/js/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="/js/slick.core.js"></script>
<script type="text/javascript" src="/js/slick.dataview.js"></script>
<script type="text/javascript" src="/js/slick.grid.js"></script>
<script type="text/javascript" src="/js/SearchPage.js"></script>
<title>Search for a person</title>
	</head>
	<body>
		<div id="body">
			<h3>Search for persons</h3>
			<div id="form">
				<div style="padding-left: 5px;">
					<p>
						<b>Add parameters to search for persons:</b>
					</p>
				</div>
				<form wicket:id="searchPageForm">
					<table cellspacing="0">
						<tr>
							<td><label wicket:id="id-label">[id label]</label>:</td>
							<td><input type="text" wicket:id="id" /></td>
						</tr>
						<tr>
							<td><label wicket:id="firstName-label">[firstName
									label]</label>:</td>
							<td><input type="text" wicket:id="firstName" /></td>
						</tr>
						<tr>
							<td><label wicket:id="lastName-label">[lastName
									label]</label>:</td>
							<td><input type="text" wicket:id="lastName" /></td>
						</tr>
						<tr>
							<td><label wicket:id="sex-label">[sex label]</label>:</td>
							<td><select name="sex" wicket:id="sex"></select></td>
						</tr>
						<tr>
							<td><label wicket:id="city-label">[city label]</label>:</td>
							<td><input type="text" wicket:id="city" /></td>
						</tr>
						<tr>
							<td><label wicket:id="street-label">[street label]</label>:</td>
							<td><input type="text" wicket:id="street" /></td>
						</tr>
						<tr>
							<td><label wicket:id="houseNr-label">[houseNr label]</label>:</td>
							<td><input type="text" wicket:id="houseNr" /></td>
						</tr>
						<tr>
							<td><label wicket:id="zipCode-label">[zipCode label]</label>:</td>
							<td><input type="text" wicket:id="zipCode" /></td>
						</tr>
						<tr>
							<td style="text-align: right;"><input type="button"
								value="Clear" class="searchsubmit formbutton"
								wicket:id="searchPage-clear-button" /></td>
							<td><input type="submit" value="Search"
								class="searchsubmit formbutton"
								wicket:id="searchPage-submit-button" /></td>
						</tr>
					</table>
				</form>

			</div>
			<div id="rightPanel">
				<div wicket:id="searchPageFormFeedback">[[ feedback ]]</div>
			</div>
			<!-- 			move styles to styles.css -->
			<div id="personListDiv">
				<table cellspacing="0" style="text-align: center"
					wicket:id="personListContainer">
					<colgroup width="100"></colgroup>
					<colgroup width="150"></colgroup>
					<colgroup width="150"></colgroup>
					<colgroup width="50"></colgroup>
					<colgroup width="150"></colgroup>
					<colgroup width="150"></colgroup>
					<colgroup width="65"></colgroup>
					<colgroup width="65"></colgroup>
					<colgroup width="65"></colgroup>
					<tr>
						<th><b>ID</b></th>
						<th><b>First Name</b></th>
						<th><b>Last Name</b></th>
						<th><b>Sex</b></th>
						<th><b>City</b></th>
						<th><b>Street</b></th>
						<th><b>House Number</b></th>
						<th><b>ZIP Code</b></th>
					</tr>
					<tr wicket:id="personList">
						<td><label wicket:id="personItemIdLabel">[person ID
								label]</label></td>
						<td><label wicket:id="personItemFirstNameLabel">[person
								First Name label]</label></td>
						<td><label wicket:id="personItemLastNameLabel">[person
								Last Name label]</label></td>
						<td><label wicket:id="personItemSexLabel">[person Sex
								label]</label></td>
						<td><label wicket:id="personItemCityLabel">[person
								City label]</label></td>
						<td><label wicket:id="personItemStreetLabel">[person
								Street label]</label></td>
						<td><label wicket:id="personItemHouseNrLabel">[person
								House Number label]</label></td>
						<td><label wicket:id="personItemZipLabel">[person ZIP
								Code label]</label></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</wicket:panel>
</html>